<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../assets/flexible/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../assets/swiper/css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/limit_time.css" />
</head>

<body>

    <!-- 头部大图 -->
    <img class="header" src="https://wap.ghs.net/public/images/90/d0/be/28006da120f856132d471e3282abf68d4fdec987.jpg">
    <ul class="nav">
        <li class="lis">
            8:00<br>已开抢
        </li>
        <li class="lis on">
            12:00<br>抢购中
        </li>
        <li class="lis">
            16:00<br>即将开始
        </li>
    </ul>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">

            </div>
            <div class="swiper-slide">

            </div>
            <div class="swiper-slide">
                
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>





    <script src="../assets/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/swiper/js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/artTemplate/template-web.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/limit.js" type="text/javascript"></script>
    <script type="text/javascript">
        var mySwiper = new Swiper('.swiper-container', {
            onTransitionEnd: function (swiper) {
                $('.lis').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
            }
        })

        $('.lis').click(function () {
            $(this).addClass('on').siblings().removeClass('on');
            mySwiper.slideTo($(this).index(), 1000);
        });
    </script>
</body>

</html>